<template>
	<!-- 歌曲列表 -->
	<view>
		<helang :params="params"></helang>
		<view v-if="songsListData.length!==0">
			<image :src="Info.coverImgUrl" mode="aspectFit" class="bookmark"></image>
			<text class="iconfont icon-play Counttext">{{getCount(Info.playCount)}}</text>
			<!-- 歌单名字 -->
			<view class="listdetail">
				<view class="listname">
					{{Info.name}}
				</view>
				<!-- 用户 -->
				<image :src="Info.creator.avatarUrl" mode="aspectFit" class="userimg"></image>
				<view class="username">
					<text>{{Info.creator.nickname}}</text>
					<text class="iconfont icon-xiangyou"></text>
				</view>
		
				<view class="remark">
					<text class="describe">{{Info.description?Info.description:'编辑信息'}}</text><text class="iconfont icon-xiangyou"></text>
					<text class="iconfont icon-pinglun"></text>
				</view>
			</view>
		</view>
		<!-- /songsList -->
		
			<view class="myscroll" v-if="songsListData.length!==0">
				<view class="listnav" style="margin-bottom: 30rpx; margin-left: 20upx;">
					<text class="iconfont icon-bofang"></text>
					<text class="allplay">播放全部</text>
					<text class="listnum">（共{{songsListData.length}}首）</text>
				</view>
			<songList :songsListData='songsListData' @songId='getSongId'></songList>
		</view>
		<text>\n\n\n\n\n\n</text>
		<view class="zaudio" v-show="paused !== true ">
			<my-zaudio theme="theme3" ref='a'></my-zaudio>
		</view>
	</view>
</template>

<script>
	import helang from '../../../../components/helang-blur/helang-blur.vue'
	import toSongDetail from '../../../../comments/toSongDetail.js'
	import createAllSongList from '../../../../comments/createAllSongList.js'
	import songList from '../../../../comments/songsList.vue'
	import {
		mapGetters,
		mapMutations
	} from 'vuex';
	export default {
		mixins: [toSongDetail, createAllSongList],
		components: {
			songList,
			helang
		},
		data() {
			return {
				params: {
					width: '750rpx',
					height: '500rpx',
					image: "https://mydarling.gitee.io/uniapp-extend/static/images/douyin/4.jpg",
					blur: "xl"
				},
				songsListData: [],
				songsURL: '',
				songIdList: [],
				Info:{}
			}
		},
		onLoad: function(options) {
			this.getSongList(options.id)
			this.getSongListInfo(options.id)
			uni.setNavigationBarTitle({
				title: options.title
			})
		},

		methods: {
			...mapMutations(['set_audio', 'set_audiolist']),
			getSongId(songId) {
				if (JSON.stringify(this.songIdList) !== JSON.stringify(this.audiolist) || this.audiolist.length === 0) {
					this.createAllSongList(this.songsListData, this.songIdList)
					this.$store.commit('set_audiolist', {
						data: this.songIdList,
						status: false
					})
				}
				console.log(this.songIdList)
				this.toSongDetail(songId)
			},
getCount(num) {
				if (num >= 100000 && num < 100000000) {
					return parseInt(num / 10000) + '万'
				} else if (num >= 100000000) {
					return parseInt(num / 10000000) / 10 + '亿'
				} else {
					return num
				}
			},
			// 获取歌曲列表
			async getSongList(topId) {
				const {
					data: res
				} = await this.$request({
					url: '/playlist/track/all',
					data: {
						id: topId,

					}
				})
				if (res.code === 200) {
					this.songsListData = res.songs
					// console.log(res)
				}

			},
			// 获取歌单信息
			async getSongListInfo(id){
				const {data:res} = await this.$request({
					url:'/playlist/detail',
					data:{id:id}
					
				})
				this.params.image=res.playlist.backgroundCoverUrl
				this.Info=res.playlist
			}
			// 获取歌曲地址
			// async toTheSongs(songId){
			// 	const {data:res} = await this.$request({
			// 		url:'/song/url',
			// 		data:{
			// 			id:songId
			// 		}
			// 	})
			// 	// 歌曲列表获取成功
			// 	if(res.code === 200){
			// 		console.log(res)
			// 		this.songsURL = res.data[0].url
			// 	}
			// },

		},
		computed: {
			...mapGetters(['audiolist', 'playinfo', 'paused'])
		}
	}
</script>

<style scoped>
	
	.myscroll{
		position: absolute;
		margin-top: -8%;
		background-color: #ffffff;
		border-top-left-radius:40upx ;
		border-top-right-radius:40upx ;
		z-index: 10;
	}
	.vip {
		display: inline-block;
		color: #EC4141 !important;
		border: 1px solid #EC4141;
		transform: scale(0.7);
	}
.userimg {
			margin-top: 10rpx;
			margin-bottom: 10rpx;
			width: 60upx;
			height: 60upx;
			border-radius: 50%;
			vertical-align: middle;

		}
		.username {
			margin-top: 10rpx;
			margin-bottom: 10rpx;
			padding-left: 20rpx;
			max-width: 250rpx;
			display: inline-block;
			vertical-align: middle;
			font-size: 25rpx;
			color: #EFEFEF;
		
			.iconfont {
				font-size: 25rpx;
			}
		}
	.listdetail {
		position: absolute;
		top: 150rpx;
		z-index: 1;
		left: 315rpx;

		

		.listname {
			font-size: 35rpx;
			color: #FFFFFF;
			max-width: 400rpx;
		}



	}

	.bookmark {
		position: absolute;
		top: 150rpx;
		left: 30rpx;
		height: 250rpx;
		width: 250rpx;
		z-index: 1;
		border-radius: 20rpx;
		filter: brightness(75%);
		-webkit-filter: brightness(75%)
	}

	.Counttext {
		top: 160rpx;
		right: 490rpx;
		display: block;
		font-size: 25rpx;
		color: #FFFFFf;
		position: absolute;
		z-index: 2;
	}

		.remark {
			margin-left: 19%;
			font-size: 20rpx;
			color: #EFEFEF;

			.describe {
				display: inline-block;
				margin-left: 80rpx;
				max-width: 250rpx;
				max-height: 100rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			    vertical-align: middle;
			}

			.icon-xiangyou {
				vertical-align: middle;
				font-size: 20rpx;
			}

			.icon-pinglun {
				vertical-align: middle;
				padding-left: 20rpx;
				font-size: 40rpx;
			}
		}
	.nav {
		width: 100%;
		position: absolute;
		top: 0;
		z-index: 10086;

		image {
			width: 80rpx;
			height: 80rpx;
			margin-top: 10rpx;
			margin-left: 10rpx;
			vertical-align: middle;
		}

		text {
			vertical-align: middle;
			padding-left: 20rpx;
			font-size: 40rpx;
		}

		color: #FFFFFF;
	}
	.navAll{
		top: 50rpx !important;
	}

	
</style>
